<meta charset="UTF-8">
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        background-color: black;
    }
</style>

<body>
    <div class="blood" style="width: 200px;height: 50px;background-color: #fff;">
        <div class="xue" style="width: 200px;height: 40px;background-color: red;"></div>
    </div>
</body>
<script>

    setInterval(function () {
        var imgobj = document.createElement('img')
        imgobj.src = './img/优菈.jpg'
        var min = 100
        var max = 300
        var temp = Math.floor(Math.random() * (max - min + 1) + min)
        imgobj.width = temp

        var leftmin = 0
        var leftmax = (window.innerWidth || document.documentElement.clientWidth) - temp
        var left = Math.floor(Math.random() * (leftmax - leftmin + 1) + leftmin)

        var topmin = 0
        var topmax = (window.innerHeight || document.documentElement.clientHeight) - temp
        var top = Math.floor(Math.random() * (topmax - topmin + 1) + topmin)


        imgobj.style.position = 'absolute'
        imgobj.style.left = left + 'px'
        imgobj.style.top = top + 'px'
        document.body.appendChild(imgobj)
    }, 1000)


    document.body.onclick = function (evt) {
        var e = evt || window.event
        var target = e.target || e.srcElement
        console.log(target);
        if (target.nodeName == 'IMG') {
            document.body.removeChild(target)
            // 星星移除血条加1
            var xue = parseInt(document.querySelector('.xue').style.width)
            if (xue + 1 !== 100) {
                document.querySelector('.xue').style.width = xue + 1 + 'px'
            }

        }
    }

    setInterval(function () {
        var xue = parseInt(document.querySelector('.xue').style.width)
        document.querySelector('.xue').style.width = xue - 1 + 'px'
    }, 1000)

</script>